
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import { Pder } from '@/types/pder'
import http from '@/api/http'
const active = ref(0)
const zz = ref(1)
const yy=ref([])
const yy1=ref([])
const bb=ref({Pbh:'',zt:0})
 const tt=ref(true)
  const tt1=ref(false)
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'


const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})



const cha = () => {
    http.getList<Pder>('Pder/Pdermain',{})
        .then(res => {         
             console.log(res.data)
             yy.value.length=0
           yy.value.push(...res.data)
           yy.value=yy.value.filter(n=>n.zt<4)
           if(yy.value.length>0){
           yy1.value=yy.value.sort((a,b)=>a.dbh-b.dbh)
           bb.value.Pbh=yy1.value[0].pbh
           active.value=1
           if(yy1.value[0].ptype==1){
            yy1.value[0].zt=yy1.value[0].zt+1
           }
            bb.value.zt=yy1.value[0].zt
           }else{
            isDisabled.value=true
            tt.value=false
            tt1.value=true
           }
           console.log(bb.value.zt)
           console.log( yy.value.length)
           //yy1.push(...yy.filter(n=>n.zt<4))
           
           //this.bb.sort((a,b)=>a.Dbh-b.Dbh)
          
        }).catch(err => {
            console.log('err: ', err);
        })
}
onMounted(() => {
    cha();
})
const isDisabled = ref(false)
const next = () => {
 
  if(yy1.value.length>0){
    if(active.value<3){
    if (active.value++ > 2) active.value = 1
    
   
    bb.value.zt=bb.value.zt+1
    console.log(bb.value)
       http.put('Pder/gai',bb.value).then(res => {
                if (res.code == '1') {
               console.log('成功')
               console.log(bb.value.zt)
                if(yy1.value.length==1&&bb.value.zt==4&&yy1.value[0].ptype==1||yy1.value.length==1&&bb.value.zt==4&&yy1.value[0].ptype==2){

              isDisabled.value=true
              active.value=0;
             cha();
             }
             if(bb.value.zt==3&&yy1.value[0].ptype==2){
              bb.value.zt=bb.value.zt+1
               const intervalId = setInterval(() => {	
                http.put('Pder/gai',bb.value).then(res => {
                if (res.code == '1') {
                   console.log('3秒成功')
                   cha()
                   if(yy1.value.length==0){
                    isDisabled.value=true
                   }
                   
                }
                clearInterval(intervalId);
               })
              }, 3000);

             }
                }
                else {
                 
                }

            }).catch(err => {
                console.log('err: ', err);
            })
    }else if(active.value==3)
    {
      active.value=1
      if(yy1.value.length>0){
        cha()
      }
    }

  }else if(yy1.value.length<0){
    isDisabled.value=true
    cha();
  }
}
const formatCurrency = (amount, currency = 'CNY') => {
  // 处理非数字情况
  if (isNaN(amount)) return '¥0.00'
  
  // 根据货币类型选择符号和格式
  const options = {
    CNY: { symbol: '¥', decimal: 2 },
    USD: { symbol: '$', decimal: 2 },
    EUR: { symbol: '€', decimal: 2 }
  }
  
  const { symbol, decimal } = options[currency] || options.CNY
  
  // 格式化格式化数字（千分位+保留小数）
  const formatted = amount.toFixed(decimal).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  
  // 拼接符号（根据货币类型调整符号位置）
  return currency === 'USD' || currency === 'EUR' 
    ? `${symbol}${formatted}`  // $1,234.56
    : `${symbol}${formatted}`  // ¥1,234.56（人民币符号在前）
}
</script>
<template>
    <el-steps
    class="mb-4"
    style="max-width: 600px"
    :space="200"
    :active="active"
    simple
  >
    <el-step title="开始" :icon="Edit" />
    <el-step title="处理中" :icon="UploadFilled" />
    <el-step title="结束" :icon="Picture" />
  </el-steps>

 
     <span style="font-size: 13px;">样式大小:</span>
    <el-radio-group style="margin-left: 10px;" v-model="size">
    <el-radio value="large">大</el-radio>
    <el-radio value="default">中</el-radio>
    <el-radio value="small">小</el-radio>
  </el-radio-group><br style="margin-top:100px;"></br>
 <el-text class="w-150px mb-2" truncated>
    前方还有{{yy.length }}份待处理
  </el-text>

<div v-show="tt">
  <el-descriptions
    class="margin-top"
    title="详细"
    :column="3"
    :size="size"
    :style="blockMargin"
  >

    <el-descriptions-item label="订单编号">{{yy1[0]?.pbh}}</el-descriptions-item>
    <el-descriptions-item label="订单号">{{yy1[0]?.dbh}}</el-descriptions-item>
    <el-descriptions-item label="时间">{{yy1[0]?.pdata.substr(0,10)}}</el-descriptions-item>
    <el-descriptions-item label="取餐方式">
      <el-tag size="small">{{ yy1[0]?.ptype==1?'自取':'外卖' }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="下单地址">
     {{ yy1[0]?.dizhi }}
    </el-descriptions-item>
  </el-descriptions>
  <el-table :data="yy1[0]?.pxq" style="width: 100%">
    <el-table-column prop="name" label="" width="180" />
    <el-table-column  label="" width="180" >
        <template #default="{ row }">
                    X{{ row.shu}}
                </template>
  </el-table-column >
    <el-table-column prop="price" label="" width="120" >
         <template #default="{ row }">
                    {{formatCurrency(row.price, 'CNY')}}
                </template>
        </el-table-column >
        <el-table-column prop="pl" label="" width="150" />
  </el-table>
  </div>
<el-empty v-show="tt1" description="暂无订单" />
  
   <el-button :disabled="isDisabled" style="margin-top: 12px" @click="next">{{active>2?"下一单":"下一步"}}</el-button>
</template>
<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>


